<template>
  <view class="cart-order-wrap">
    <view class="header">
      <!-- tab 切换 -->
      <view class="tab-box">
        <u-tabs
          :list="classOrderList"
          :current="current"
          :fontSize="28"
          :isScroll="false"
          bgColor="#ffffff"
          inactiveColor="#999999"
          @change="handleTabChange"
          :active-item-style="{ color: '#333' }"
          :bar-style="{ background: '#FEDD00', borderRadius: '100rpx' }"
        ></u-tabs>
      </view>
    </view>

    <view class="list">
      <view
      class="item" v-for="(item, index) in items" :key="index" @tap="handleToDetail(item)">
        <view class="merber">
          <view class="merber__time">
            {{ item.created_at }}
          </view>

          <view class="status" v-if="item.left_time <= 0 && item.status !== 2" >
            已结束
          </view>
          <view class="status" v-else >
            {{ item.status | statusValueFilter }}
          </view>
        </view>
        <view class="info">
          <image
            class="info__img"
            :src="item.thumb"
          ></image>
          <view class="info__desc" >
            <view class="name" >{{ item.title }}</view>
            <view class="sku" >参与人数/总人数：{{ item.join_amount }}/{{ item.recruit_amount }}</view>
            <view class="price" >
              <template v-if="item.left_time > 0 && item.status === 1" >
                <countDown
                :format="item.left_time > 1000 * 60 * 60 * 24 ? 'DD天HH:mm:ss' : 'HH:mm:ss'"
                suffix="后结束"
                :time="item.left_time"
                @finish="endTime"
                color="#FF6034"></countDown>
              </template>
              <template v-else>
                <text>拼车已结束</text>
              </template>
            </view>
          </view>
        </view>
      </view>
      <view class="full-green" v-if="!isEmpty">
        <load-more :status="loadingStatus"></load-more>
      </view>
      <view v-else>
        <u-empty description="暂无订单～"></u-empty>
      </view>
    </view>


     <view class="btn-box">
       <button
         class="pp-button cancel-btn"
         hover-class="pp-button--active"
         @tap="handleToPublish"
       >
         发布拼车
       </button>
     </view>

  </view>
</template>

<script>
import loadMore from '@/components/load-more.vue';
import uEmpty from '@/basic-components/u-empty/index.vue';
import uTabs from '@/basic-components/u-tabs/index.vue';
import countDown from '@/basic-components/u-count-down/index.vue';
import { momentDate } from '@/tool';

import moreLoadMixins from '@/common/load-more';

import { ARTICLE_LIST, ATTACHMENT_TYPE } from '@/api/home';

export default {
  components: {
    loadMore,
    uEmpty,
    uTabs,
    countDown
  },
  mixins: [moreLoadMixins],
  data() {
    return {
      // tab切换
      current: 0,
      post_type: '',
      classOrderList: [{
        name: '全部'
      },{
        name: '进行中'
      },{
        name: '已结束'
      },{
        name: '已取消'
      }],

    };
  },
  async onLoad({ current = 0 }) {

    this.current = current;

    await this.getCarId()
    // 列表信息
    this.resetInit();
  },
  onShow() {
    if(!this.post_type) {
      return
    }
    // 列表信息
    this.resetInit();
  },
  onPullDownRefresh() {
    // 初始化
    this.resetInit();
    uni.stopPullDownRefresh();
  },
  filters: {
    statusValueFilter(val) {
      const statusObj = {
        1: '进行中',
        3: '已结束',
        2: '已取消',
      }

      return statusObj[val]
    }
  },
  methods: {
    async getCarId() {
      const {
        data
      } = await this.$http.get(ATTACHMENT_TYPE, {
          per_page: 100,
        })

        let list = data;
        const carItem = list.filter(item => {
          return item.label === 'CAR'
        })

        this.post_type = carItem[0].id;
    },
    handleToPublish() {
      const regionId = uni.getStorageSync('regionId');
      if (!regionId) {
         uni.showToast({
           title: '请先绑定区域，才能发布拼车',
           icon: 'none',
         });
        return;
      }
      this.$navigate({
        page: 'cartPublish'
      })
    },
    handleToDetail(item) {

      let itemStatus = item.status;
          if(item.left_time <= 0 && item.status !== 2) {
            itemStatus = 3;
          }

      this.$navigate({
        page: 'cartOrderDetail',
        params: {
          id: item.id,
          status: itemStatus
        },
      });
    },
    handleTabChange(index) {
      if(this.current === index) {
        return
      }
      this.current = index;
      this.resetInit();
    },
    endTime() {
      this.resetInit();
    },
    initData() {
      // 列表搜索
      const params = {};
      params.page = this.pages.currentPage;
      params.per_page = this.pages.perPage;
      params.post_type = this.post_type;
      params.is_order = 1;

      if(this.current) {
         const statusInt = {
           1: 1,
           2: 3,
           3: 2
         }
         params.status = statusInt[this.current];
      }
      return this.$http.get(ARTICLE_LIST, params).then(res => {
        const { data, last_page, current_page, total } = res;

        if (data && data.length) {

          data.forEach(item => {
            item.created_at = momentDate(item.created_at);
          });

          this.items = this.items.concat(data);
          this.pages.currentPage=current_page+1;
        }
        return {
          perPage: this.pages.perPage,
          currentPage: this.pages.currentPage,
          hasNext: !last_page === current_page,
          empty: current_page === 1 && total === 0,
        };
      });
    },
  },
};
</script>

<style lang="less">
.cart-order-wrap {
  padding-bottom: 150rpx;
  padding-bottom: calc(150rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 118rpx;
    padding-top: 24rpx;
    background: #fff;
  }
  .tab-box{
    width: 100%;
    background-color: #FFFFFF;
  }
  .list {
    display: flex;
    flex-direction: column;
    padding-top: 136rpx;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    .item {
      position: relative;
      width: 710rpx;
      padding: 24rpx;
      padding-bottom: 0;
      margin: auto;
      margin-bottom: 20rpx;
      background-color: #ffffff;
      border-radius: 16rpx;
      .merber {
        display: flex;
        align-items: center;
        justify-content: space-between;
        &__time{
          font-size: 28rpx;
          color: #999999;
        }
        .status{
          font-size: 28rpx;
          flex-shrink: 0;
          margin-right: 10rpx;
          color: #FF6034;
        }
      }
      .title {
        font-size: 32rpx;
        font-weight: 500;
        padding: 20rpx 0;
      }
      .info {
        display: flex;
        padding: 20rpx 0;
        &__img {
          flex-shrink: 0;
          width: 180rpx;
          height: 180rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
        }
        &__desc{
          flex: 1;
          .name{
            height: 96rpx;
            font-size: 32rpx;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            white-space: normal !important;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .sku{
            font-size: 24rpx;
            color: #999999;
          }
          .price{
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding-top: 20rpx;
            font-size: 26rpx;
          }
        }
      }
      .count-line {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-top: 28rpx;
        .price {
          font-size: 28rpx;
          font-weight: 500;
          color: #ff0000;
        }
      }
    }
  }
  .btn-box {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 136rpx;
    .cancel-btn {
      width: 710rpx;
      height: 92rpx;
      font-size: 32rpx;
      background-color: #fedd00;
    }
  }
}
</style>
